import { defineComponent } from 'vue'
import IconCampsite from '/@vite-icons/carbon/campsite'
import { useSlot } from '../hooks/useSlot'
import { useReactive } from '../hooks/useReactive'

export const Foo = defineComponent({
  name: 'Foo',
  props: {
    isEnabled: {
      type: Boolean,
      required: true
    }
  },
  setup() {
    const s = useReactive(() => ({
      value: false,
      toggle() {
        s.value = !s.value
      },
      iconClick() {
        console.debug('icon clicked')
      }
    }))
    return s
  },
  render() {
    return <div onClick={this.toggle}>
      foo.isEnabled: {String(this.value)}
      <IconCampsite height={'1.2em'} width={'1.2em'} class={'aaa'} onClick={this.iconClick}/>
      {useSlot(this.$slots, 'bottom')}
    </div>
  }
})
